<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { DailystatisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray, getSummaries } from '@/utils'
  import table2excel from 'js-table2excel';
  const action = reactive({
    list:[] as any[],
    timeArr:getDateArray('ymdh'),
  })
  const listQuery = reactive({
    room_id:'',
  })
  const handleSerach = ()=>{
    getList()
  }
  const getList = async()=> {
    const loading = Toastloading()
    const { playTime, endTime } = getPlayEndTime(action.timeArr)
    const res = await DailystatisticsApi.roomDataByHour({
      created_st:playTime,
      created_ed:endTime,
      ...listQuery
    })
    loading.close()
    const { data=[] } = res
    action.list = data
  }
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中')
    const { playTime, endTime } = getPlayEndTime(action.timeArr)
    const res = await DailystatisticsApi.roomDataByHour({
      ...listQuery,
      created_st:playTime,
      created_ed:endTime,
    })
    loading.close()
    const { data=[] } = res
    const tHeader = [
      { title: '房间ID', key: "room_id"},
      { title: '总数', key: "total"},
      { title: '时间段', key: "time"},
    ]
    table2excel(
      tHeader,
      data,
      `每日房间消费小时统计`)
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">房间ID：</div>
          <el-input v-model="listQuery.room_id" placeholder="请输入房间ID" />
        </div>
        <div class="labelItem">
          <div class="label">时间：</div>
          <el-date-picker
            v-model="action.timeArr"
            type="datetimerange"
            format="YYYY-MM-DD HH:00:00"
            value-format="YYYY-MM-DD HH:00:00"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="warning" @click="handleDownload">导出列表</el-button>
        </div>
      </div>
    </div>
    <el-table
      show-summary
      class="xm-main xm-TableCenter"
      :data="action.list"
      border
      :summary-method="((param:any)=>getSummaries(param,[0,2]))"
    >
      <el-table-column min-width="80" prop="room_id" label="房间ID" />
      <el-table-column min-width="120" prop="total" label="总数" />
      <el-table-column min-width="150" prop="time" label="时间段" />
    </el-table>
  </div>
</template>
